<template>
  <div class="beam-layout-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            v-model="defaultTime"
            :activeDate="activeDate"
            :equTypeValue="equTypeValue"
            @conditionChange="selectGroupChange($event)"
          >
            <template slot="space_4">
              <bjSelect
                v-model="result"
                :allowClear="true"
                placeholder="请选择压浆结果"
                :dataResource="resultSource"
                :replaceFields="{ key: 'key', label: 'name' }"
                @change="resultChange($event)"
              ></bjSelect>
            </template>
          </AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="search()"> 查询 </a-button>
          <a-button type="primary" @click="dataDownload()">数据下载</a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="beam-table-container">
      <div class="table-header" header="压浆数据"></div>
      <div class="main" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :width="item.width"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <div
                v-if="item.key == 'resultStr'"
                :class="[checkResultClass(row.resultStr), 'status-text']"
              >
                {{ row[item.key] }}
              </div>
              <div v-else>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
          <vxe-column
            field="operate"
            width="150"
            title="操作"
            fixed="right"
            align="center"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="gotoView(row.id)">
                  详情
                </a-button>
                <a-button type="link" @click="gotoEdit(row)" v-if="isEdit">
                  修改梁号
                </a-button>
              </div>
              <!-- <a-button type="primary" @click="reportDownLoad(row.id)">
                报告下载
              </a-button> -->
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 详情页面 -->
    <detailPage :visible.sync="pageVisible" :id="id"></detailPage>
    <!-- 编辑 -->
    <editModal
      :visible.sync="editModalVisible"
      :dataSoucre="checkRow"
    ></editModal>
  </div>
</template>

<script>
import AssociativeSelectGroup from "@/components/collect-app/AssociativeSelectGroup";
import bjSelect from "@/components/bj-select";
import detailPage from "./components/detail.vue";
import editModal from "./components/editModal.vue";
import {
  downLoadFileByArraybuffer,
  downLoadBatchFileByArraybuffer,
} from "@/utils";
import {
  yjBatchReportDownLoad,
  yjReportDownLoad,
  yjList,
  getYjHasDataDate,
  yJDownLoad,
} from "@/api/wisdom-beam/collect-app.js";
import { getDickeyList } from "@/api/common.js";
import { getLoginData } from "@/tools";
export default {
  components: {
    AssociativeSelectGroup,
    bjSelect,
    detailPage,
    editModal,
  },
  data() {
    return {
      conditionsData: {},
      equTypeValue: 9, //设备：压浆
      defaultTime: [],
      activeDate: [],
      selectMap: [
        //标段
        {
          type: "block",
          placeholder: "请选择标段",
          isDefault: true,
          allowClear: false,
          show: false,
        },
        //设备
        {
          type: "mixin",
          mode: "default",
          placeholder: "请选择压浆设备",
          show: true,
        },
        //设备
        {
          type: "bridgeName",
          mode: "default",
          placeholder: "请选择桥梁名称",
          show: true,
        },
        //设备
        {
          type: "componenPart",
          mode: "default",
          placeholder: "请选择梁号",
          show: true,
        },
        {
          type: "calendar",
        },
      ],
      loading: false,
      columns: [
        {
          title: "桥梁名称",
          key: "bridgeName",
        },
        {
          title: "梁号",
          key: "componentParts",
        },
        {
          title: "梁型",
          key: "beamType",
        },
        {
          title: "设备名称",
          key: "equName",
        },
        {
          title: "压浆时间",
          key: "trialDate",
        },
        {
          title: "压浆结果",
          key: "resultStr",
        },
      ],
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      result: undefined,
      resultSource: [
        {
          name: "合格",
          key: "0",
        },
        {
          name: "不合格",
          key: "1",
        },
      ],
      pageVisible: false,
      id: "",
      editModalVisible: false,
      checkRow: {},
      isEdit: false,
    };
  },
  mounted() {
    this.loading = true;
  },
  methods: {
    //查询修改梁号权限
    getEdidAuth() {
      let { userId } = getLoginData();
      return new Promise((resolve, reject) => {
        getDickeyList({ dictKey: "zl_yj_update_compart_button" })
          .then((res) => {
            let { data } = res;
            let soucre = data?.result ?? [];
            let ids = soucre.map((v) => v?.dicDesc);
            this.isEdit = ids.includes(userId);
            resolve();
          })
          .catch((_) => {
            this.isEdit = false;
            reject();
          });
      });
    },

    checkResultClass(result) {
      switch (result) {
        case "合格":
          return "normal";

        case "不合格":
          return "error";

        default:
          return "cancel";
      }
    },
    //编辑
    gotoEdit(row) {
      this.editModalVisible = true;
      this.checkRow = row;
    },

    gotoView(id) {
      this.id = id;
      this.pageVisible = true;
    },
    //数据下载
    dataDownload() {
      let {
        conditionsData: { block, mixin, bridgeName, componenPart },
        result,
        defaultTime,
      } = this;
      yJDownLoad({
        secCode: block,
        equCode: mixin,
        bridgeName,
        componentParts: componenPart,
        trialResult: result?.key || "",
        startTime: defaultTime[0] || "",
        endTime: defaultTime[1] || "",
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "压浆数据");
        })
        .catch((_) => {});
    },

    // 报告下载
    // reportDownLoad(id) {
    //   yjReportDownLoad({
    //     yjId: id,
    //   })
    //     .then((data) => {
    //       downLoadFileByArraybuffer(data, "智能压浆");
    //     })
    //     .catch((_) => {
    //       console.log(_);
    //     });
    // },

    //数据下载
    // batchDownload() {
    //   let {
    //     conditionsData: { block, mixin, bridgeName, componenPart },
    //     result,
    //     defaultTime,
    //   } = this;
    //   yjBatchReportDownLoad({
    //     secCode: block,
    //     equCode: mixin,
    //     bridgeName,
    //     componentParts: componenPart,
    //     trialResult: result?.key || "",
    //     startTime: defaultTime[0] || "",
    //     endTime: defaultTime[1] || "",
    //   })
    //     .then((data) => {
    //       downLoadBatchFileByArraybuffer(data, "智能压浆数据下载");
    //     })
    //     .catch((_) => {});
    // },

    resultChange(e) {
      this.result = e;
      this.search();
    },

    search() {
      this.pager.page = 1;
      this.getDateList();
      this.getTableData();
      this.getEdidAuth();
    },
    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.search();
    },
    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },

    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let {
        conditionsData: { block, mixin, bridgeName, componenPart },
        result,
        defaultTime,
      } = this;
      yjList({
        secCode: block,
        equCode: mixin,
        bridgeName,
        componentParts: componenPart,
        trialResult: result?.key || "",
        startTime: defaultTime[0],
        endTime: defaultTime[1],
        page,
        pageSize,
      })
        .then((res) => {
          let { data } = res;
          this.tableData = data?.result?.records || [];
          this.pager.total = data?.result?.total || 0;
        })
        .catch((err) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    //查询有数据的日期列表
    getDateList() {
      let {
        conditionsData: { block, mixin, bridgeName, componenPart },
        result,
      } = this;
      getYjHasDataDate({
        secCode: block,
        equCode: mixin,
        bridgeName,
        componentParts: componenPart,
        trialResult: result?.key || "",
      })
        .then((res) => {
          let { data } = res;
          this.activeDate = data.result || [];
        })
        .catch((_) => {
          this.activeDate = [];
        });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped>
.table-header {
  padding: 28px 20px !important;
}
.status-text {
  border-radius: 4px;
  color: #fff;
  .flex();
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 12px;
  width: 80px;
  &.normal {
    background: #4bc964;
  }
  &.error {
    background: #ff3f4a;
  }
  &.cancel {
    background: #f1f2f7;
    color: #aab0bc;
  }
}
</style>
